<template>
    <div class="user-info-top">
        <div class="user-info-top-content">
            <div class="user-info-top-content-left">
                <user-head-img 
                :userId="userInfo.userId" 
                :userImg="userInfo.headImg"
                :width="userInfo.width"
                :height="userInfo.height"
                class="user-head-img"
                ></user-head-img>
                <sex-icon id="user-head-sex" :sex="userInfo.sex"></sex-icon>
            </div>
            <div class="user-info-top-content-right">
                <div class="content-right-left">
                    <div id="user-info-rank" class="user-info-list user-info-list-top">
                        <span class="user-name">{{userInfo.name}}</span>
                    </div>
                    <div id="user-info-signature" class="user-info-list user-info-list-top">
                        <span id="user-info-signature-text">{{userInfo.signature}}</span>
                    </div>
                </div>
                <div class="content-right-right">
                    <follow 
                    :isFollow="userInfo.isFollow" 
                    :userId="userInfo.userId" 
                    @setCancelFollow="setCancelFollow"
                    @setFollow="setFollow"
                    />
                    <div class="statistics-fans-div">
                        <span id="statistics-fans-count">{{userInfo.fans}}</span>个粉丝
                    </div>
                </div>
            </div>
        </div>
        <div class="user-write-opt-list">
            <div v-show="userInfo.address" class="area">
                <span class="color-999">位置: </span>
                {{userInfo.address}}
            </div>
        </div>
		<van-overlay :show="isShowOverlay" @click="hideOverlay" />
    </div>
</template>

<script>

// 自定义组件
import UserHeadImg from '_components/project/common/UserHeadImg'
import SexIcon from '_components/project/common/SexIcon'
import Follow from '_components/project/common/Follow'

// 自定义方法
import { getProImg } from "_projectFn/images"
import { getCookie } from '_commonFn/cookie.js'

// UI组件
import { Overlay } from 'vant'

// Vue
import Vue from 'vue'
Vue.use(Overlay)

export default {
    name: 'UserIndexTop',
    props: {
        userInfo: {
            type: Object,
            default: {},
        }
    },
    data() {
        return {
            showWindow: '',
            isShowOverlay: false,
        }
    },
    methods: {
        hideOverlay() {
            // console.log('hideOverlay')
            this.isShowOverlay = false
            this.showWindow = ''
        },
        showOverlay(windowName) {
            if (windowName) {
                this.isShowOverlay = true
                this.showWindow = windowName
            }
        },
        // 成功取消关注后的设置
        setCancelFollow() {
            this.$emit('setCancelFollow')
        },
        // 成功关注后的设置
        setFollow() {
            this.$emit('setFollow')
        },
    },
    mounted() {

    },
    activated() {

    },
    components: {
        UserHeadImg,
        SexIcon,
        Follow,
    }
}
</script>

<style lang="scss" scoped>
.user-info-top {
    // height: 90px;
    position: relative;

    .user-info-top-assist-bg {
        background: #f5f5f5;
        height: 45px;
    }

    .user-info-top-content {
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        padding: 15px;
        padding-bottom: 0;
    }

    .user-info-top-content-left {
        flex-shrink: 0;
        height: 100%;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        position: relative;
    }

    .user-head-img {
        height: 60px;
        width: 60px;
        border-radius: 50%;
    }

    #user-head-sex {
        position: absolute;
        bottom: 0px;
        right: 4px;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        background: white;
    }

    .user-info-top-content-right {
        display: -webkit-flex;
        display: flex;
        width: 100%;
    }

    .content-right-left {
        margin: 0 10px;
    }

    #user-info-rank, #user-info-signature {
        padding: 0;
    }

    .content-right-left {
        width: 100%;
    }

    .statistics-fans-div {
        display: -webkit-flex;
        display: flex;
        width: 100%;
        height: 30px;
        line-height: 22px;
        align-items: flex-end;
        justify-content: center;
        color: #999999;
    }

    .user-info-list {
        line-height: 30px;
        color: #999999;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        overflow: hidden;

        .user-tag-icon {
            &:not(:last-child) {
                margin-right: 5px;
            }
        }
    }

    #user-info-rank {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        color: #333333;
        font-weight: bold;
        line-height: 20px;
    }

    .user-tag-contribution {
        top: 0;
    }

    .user-write-opt-list {
        padding: 15px 0;

        .area {
            line-height: 30px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            overflow: hidden;
            padding: 0 15px;
            font-size: 12px;

            .color-999 {
                color: #999999;
            }
        }
    }
}
</style>